Choosing web fonts: A beginner's guide 選擇網頁字型:新手入門指南

選擇網頁字型很簡單:要選好看的,更要選實用的。

選字型要記住三個簡單的要點:

  1. 看它適不適合做標題和正文
  1. 確認它有你需要的文字和符號
  1. 檢查它有沒有粗體和斜體

建議你先想好網頁的用途,再根據下面的建議來挑選字型。

Start with your project's scope 瞭解專案規模

你的專案是長期的還是短期的?比如說,你是要做一個雜誌網站(長期),還是做一個簡單的海報(短期)

對於長期專案來說,建議選擇大型字型家族。因為長期專案需要用到各種不同的字型樣式,比如粗體、斜體等。這樣你就不用到處找字型,用一個字型家族就能搞定。推薦這些字型:AlegreyaMerriweatherRoboto

如果是短期專案,用單一字重的字型就夠了。不過,大型字型家族的多樣性在調整文字效果時也很有用。推薦這些字型:Bubblegum SansSpace Mono

What do you want your font to say? 字型傳達什麼感覺?

選字型沒有固定的規則,主要看字型的個性是否符合你的需求。

現在不用侷限於系統自帶的字型了。網頁字型和系統字型一樣穩定,而且選擇更多。

如果你想要與眾不同的字型,可以買商業字型,也可以定製字型(不過這樣比較貴)。免費的選擇是用Google Fonts上較新的字型,因為用的人還不多。

How much text are you typesetting? 文字有多長?

好的排版設計能讓讀者輕鬆找到閱讀路徑。根據文字長短選擇合適的字型很重要。

標題可以用獨特、有裝飾性的字型。短文字用粗體或壓縮字型效果更好。

中等長度的文字(3-4段)比較靈活,可以用襯線體(如Libre Baskerville)或無襯線體(如Montserrat)。

長文字(5段以上)建議用襯線體,因為這種字型看起來更舒服,特別是新聞文章這樣的長篇閱讀。推薦使用EB GaramondLibre Baskerville

What matters when it comes to point size? 字號大小有哪些考慮?

選擇網頁字型時要注意兩個關鍵點:文字有多長和字型有多大。

對於小字號(16pt以下),建議使用無襯線字型如RobotoMontserratRaleway。這類字型有較高的x字高和均勻的筆畫,更易閱讀。

對於段落文字,字型設計師Octavio Pardo建議避免使用形狀模糊的裝飾性字型(如Comfortaa),而選擇像AlegreyaBellefair.這樣的高可讀性字型。

透過觀察'a'、'g'和數字的形狀可以判斷字型質量。這些字形應該既大膽又清晰,而'v'、'w'、'x'、'y'和'z'等低頻字母可以更有設計感。

中等大小文字(16-24pt)適合使用幾何型或人文主義風格的無襯線字型,如Montserrat,Lato, andQuattrocento Sans。也可選擇現代平板襯線字型如Arvo,Sanchez, andSlabo.

大字號(24pt以上)的展示字型可以更具裝飾性,如LobsterorBerkshire Swash.但要避免使用內部空間過大的字型,這種特徵在放大後會顯得不協調。

Who's your audience and what languages do they speak? 你的使用者和他們使用的語言

現在的網站和應用都是面向全球使用者的。即使你只提供一種語言的內容,使用者也可能會用瀏覽器的翻譯功能來閱讀。

如果你選擇的字型只支援基本的英文字母,那麼當內容被翻譯成其他語言時,帶重音符號的字母就會顯示成其他字型,看起來很不協調。所以建議選擇支援多種語言的字型Merriweather,這樣網站的設計風格才能保持統一。

如果你想讓字型在各種語言中都保持一致的效果,可以使用Noto字型系列。

好的字型系列應該能適應不同的書寫系統。比如AlegreyaMerriweatherNunito,Roboto, andQuattrocento等字型,都支援英文、歐洲語言和西裡爾字母。

其他網頁字型支援更廣泛的書寫系統。根據專案需求,字型是否支援匹配的阿拉伯文希臘文希伯來文字元可能成為優先考慮的因素。你還可以找到支援多種南亞文字的網頁字型,如孟加拉文天城文古吉拉特文泰米爾文,以及東南亞語言如泰文

How do you weigh a font’s functionality versus its design features? 你如何權衡字型的功能性與其設計特點?

字型家族的風格主要分為兩部分:功能性和設計特點。

功能性指的是字型有多少種樣式變化,比如斜體和粗細程度。好的字型應該有斜體,還要有從細到粗的多種粗細選擇。推薦嘗試這些字型:BarlowPoppinsLibre Franklin

設計特點則是指字型在某些字元上的特殊變化,比如小型大寫字母和數字樣式。小型大寫字母適合用在標題上,能讓文字層次更分明。推薦嘗試:Carrois Gothic SCCormorant SCPatrick Hand SC.

字型的"替代字元"功能可讓設計更美觀。例如,Montserrat Alternates提供特別字母樣式,手寫字型(如CaveatSriracha)的替代字元能增加自然感。不論什麼字型,替代字元都能增添獨特性。

數字樣式主要有兩種:一種適合段落閱讀的傳統樣式,一種適合表格排版的等寬樣式。如果你的網頁需要展示很多數字,建議選擇這些支援多種數字樣式的字型Alegreya,Exo,Montserrat,Roboto,Spectral,Google Fonts with OpenType features.

What if you want to use more than one font? 想用多種字型怎麼辦?

在選擇多個字型的時候,字型搭配是最重要的。多試幾種不同的組合,你會找到好看的搭配。

字型搭配有兩種基本方法:

  1. 選擇風格不同的字型:這樣能讓網頁更生動有趣
  1. 選擇風格相似的字型:這樣能讓網頁看起來更整齊統一

記住一個簡單的原則:如果標題用了花哨的字型,正文就要用簡單的字型。最簡單的組合方式是標題用無襯線字型,正文用襯線字型。

這裡有兩個推薦的字型組合供你參考:
AlegreyaandAlegreya Sans:它們是同一家族的字型,風格相似
Libre Franklin和Libre Baskerville:它們的風格不同,形成對比

實用小提示:你可以直接去Google Fonts網站上試用這些字型組合,看看效果怎麼樣。